<template>
  <div>
    <van-nav-bar title="首页">
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>

    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(item, index) in bannerlist" :key="index">
        <img width="100%" height="180" :src="$host + item.img" />
      </van-swipe-item>
    </van-swipe>

    <van-tabbar v-model="active">
      <van-tabbar-item to="/" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/cate" icon="search">分类</van-tabbar-item>
      <van-tabbar-item to="/shopcar" icon="friends-o">购物车</van-tabbar-item>
      <van-tabbar-item to="/loginno" icon="setting-o">我的</van-tabbar-item>
    </van-tabbar>

    <van-grid>
      <van-grid-item
        icon="https://img.yzcdn.cn/vant/apple-1.jpg"
        text="限时抢购"
      />
      <van-grid-item
        icon="https://img.yzcdn.cn/vant/apple-2.jpg"
        text="积分商城"
      />
      <van-grid-item
        icon="https://img.yzcdn.cn/vant/apple-3.jpg"
        text="联系我们"
      />
      <van-grid-item
        icon="https://img.yzcdn.cn/vant/apple-3.jpg"
        text="商品分类"
      />
    </van-grid>

    <van-tabs type="card" @click="onClick">
      <van-tab title="热门推荐">
        <van-card
          v-for="(item, index) in goodsList1"
          :key="index"
          :price="item.price"
          desc="描述信息xxx"
          :title="item.goodsname"
          :thumb="$host + item.img"
        >
          <template #footer>
            <van-button
              style="width: 40px"
              size="mini"
              icon="cart"
              type="primary"
              @click="add(index)"
            ></van-button>
          </template>
        </van-card>
      </van-tab>
      <van-tab title="发现新品">
        <van-card
          v-for="(item, index) in goodsList1"
          :key="index"
          :price="item.price"
          desc="描述信息xxx"
          :title="item.goodsname"
          :thumb="$host + item.img"
        >
          <template #footer>
            <van-button
              style="width: 40px"
              size="mini"
              icon="cart"
              type="primary"
            ></van-button>
          </template>
        </van-card>
      </van-tab>
      <van-tab title="所有商品">
        <van-card
          v-for="(item, index) in goodsList1"
          :key="index"
          :price="item.price"
          desc="描述信息xxx"
          :title="item.goodsname"
          :thumb="$host + item.img"
        >
          <template #footer>
            <van-button
              style="width: 40px"
              size="mini"
              icon="cart"
              type="primary"
            ></van-button>
          </template>
        </van-card>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import Vue from "vue";
import { Toast } from "vant";
export default {
  data() {
    return {
      bannerlist: [],
      goodsList: [],
      goodsList1: [],
      active: 0,
      uid: JSON.parse(localStorage.userInfo).uid,
      goodsid: '',
      num: 1,
    };
  },
  created() {
    this.$http.get("/bannerlist").then((res) => {
      this.bannerlist = res.data.list;
      console.log(this.bannerlist);
    });
    this.$http.get("/getindexgoods").then((res) => {
      this.goodsList = res.data.list;
      this.goodsList1 = this.goodsList[0].content;
      console.log(this.goodsList[0].content);
    });
  },
  methods: {
    onClick(index) {
      this.goodsList1 = this.goodsList[index].content;
    },
    add(index) {
     this.goodsid=this.goodsList1[index].id
     this.$http
        .post("/cartadd", {
          uid: this.uid,
          goodsid: this.goodsid,
          num: this.num,
        })
        .then((res) => {
          console.log(res);
        });
    },
  },
};
</script>
<style>
/* .van-card__content{
  width: 
} */
</style>